<template>
  <view class="invoice-page df fdc jc-sb" :style="my_style">
    <view class="main">
      <view class="cell bg-white u-p-24 font-weight-700 flex-row u-m-b-20" @click="isInvoice">
        <u-radio-group v-model="user_invoice_id">
          <u-radio shape="circle" :name="0" :active-color="theme_color">不需要发票</u-radio>
        </u-radio-group>
      </view>
      <view class="size24 tips-color u-m-b-10 u-p-l-24 u-p-r-24">发票信息</view>

      <common-list @load="getOrderInvoiceList" :list="list" :status="status">
        <template #list>
          <view class="bg-white u-p-l-24 u-p-r-24">
            <view
              class="item flex-between"
              @click.stop="skipPage(item)"
              v-for="item in list"
              :key="item.invoice_id"
            >
              <text>{{ item.invoice_title }}</text>
              <view
                class="edit-box flex-center"
                @click.stop="jump(`/views/user/invoice/detail?id=${item.invoice_id}`)"
              >
                <u-icon name="ic_bianji" custom-prefix="custom-icon"></u-icon>
              </view>
            </view>
          </view>
        </template>
        <template #empty>
          <empty></empty>
        </template>
      </common-list>
    </view>
    <view class="footer-h"></view>
    <view class="footer-bar fixed-0 font-28">
      <view class="btn" @tap="jump('/views/user/invoice/detail')"> 添加发票 </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        id: '',
        name: '',
        page: 1,
        list: [],
        status: 'loading',
        user_invoice_id: 0,
      }
    },
    onLoad(options) {
      this.name = options.name
      this.user_invoice_id = options.invoice_id
      this.getOrderInvoiceList()
    },
    methods: {
      refresh() {
        this.refreshList(this.getOrderInvoiceList)
      },
      /**
       * 发票列表
       */
      async getOrderInvoiceList() {
        const { page, limit } = this
        let params = {
          page,
          limit,
          type: 2,
        }
        this.status = 'loading'
        const res = await this.$api.common.order('getOrderInvoiceList', params)
        if (res.code === 200) {
          const { count, list } = res.data
          this.list = [...this.list, ...list]
          if (this.list.length >= count) {
            // 所有数据加载完毕
            this.status = 'nomore'
            return
          }
          // 单次请求数据完毕
          this.status = 'loadmore'
          this.page = this.page + 1
        }
      },
      // 是否使用发票
      isInvoice() {
        let id = this.user_invoice_id

        // 获取页面栈
        var pages = getCurrentPages()
        if (pages.length > 1) {
          // 上一个页面实例对象
          var prePage = pages[pages.length - 2]
          // 关键在这里,这里面是触发上个界面
          // prePage.getAddress(item)
          // #ifdef H5
          prePage.invoice_title = '本次订单不开具发票'
          prePage.invoice_id = 0
          prePage.calculate()
          // #endif
          // #ifdef MP-WEIXIN||APP-PLUS
          prePage.$vm.invoice_title = '本次订单不开具发票'
          prePage.$vm.invoice_id = 0
          prePage.$vm.calculate()
          // #endif
        }
        uni.navigateBack()
      },
      skipPage(item) {
        this.user_invoice_id = item.id
        // 从订单确认来
        if (this.name == 'order') {
          // 获取页面栈
          var pages = getCurrentPages()
          if (pages.length > 1) {
            // 上一个页面实例对象
            var prePage = pages[pages.length - 2]
            // 关键在这里,这里面是触发上个界面
            // prePage.getAddress(item)
            // #ifdef H5
            prePage.invoice_title = item.invoice_title
            prePage.invoice_id = item.invoice_id
            // prePage.calculate()
            // #endif
            // #ifdef MP-WEIXIN||APP-PLUS
            prePage.$vm.invoice_title = item.invoice_title
            prePage.$vm.invoice_id = item.invoice_id
            // prePage.$vm.calculate()
            // #endif
          }
          uni.navigateBack()
        } else {
          uni.navigateTo({
            url: `/pages/invoice/new_invoice?id=${item.id}`,
          })
        }
      },
    },
  }
</script>

<style lang="scss">
  .invoice-page {
    height: 100%;
    padding-top: 20rpx;

    .cell {
      width: 100%;
      height: 100rpx;
      font-size: 30rpx;

      .icon-green {
        width: 38rpx;
        height: 38rpx;
        margin-right: 20rpx;
      }

      .icon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 20rpx;
      }
    }

    .item {
      width: 100%;
      height: 100rpx;
      font-size: 28rpx;
      border-bottom: 1rpx solid #d8d8d8;

      &:last-child {
        border-bottom: none;
      }

      .icon {
        width: 24rpx;
        height: 24rpx;
      }

      .edit-box {
        width: 100rpx;
        height: 100rpx;
      }
    }

    .btn {
      height: 98rpx;
      line-height: 98rpx;
      text-align: center;
    }
  }

  // 底部按钮
  .footer-bar {
    width: 100%;
    padding: 10rpx 0;
    background: rgba(255, 255, 255, 1);
    align-items: flex-start;

    .btn {
      height: 80rpx;
      margin: 0 24rpx;
      font-size: 28rpx;
      line-height: 80rpx;
      color: #fff;
      text-align: center;
      background-color: var(--color);
      border-radius: 46rpx;
    }
  }
</style>
